extensions-app: Make error/update icon interactive

Both icons are not immediately obvious, and the context provided
by the tooltip can be hard to discover.

Address this by making the icons interactive, and provide further
information in a popover.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3051>

diff --git a/subprojects/extensions-app/data/css/style.css b/subprojects/extensions-app/data/css/style.css
index dac76335b492f3b94b55bea69d792a22995b2597..f9fafa717edd5ed09f5ab4514bed62b4cfabd1bc 100644 (file)
--- a/subprojects/extensions-app/data/css/style.css
+++ b/subprojects/extensions-app/data/css/style.css
@@ -16,6 +16,3 @@ row.extension box.information,
 row.extension box.status {
   border-spacing: 3px;
 }
-
-image.error { color: @error_color; }
-image.warning { color: @warning_color; }

diff --git a/subprojects/extensions-app/data/ui/extension-row.ui b/subprojects/extensions-app/data/ui/extension-row.ui
index 37acb68d37f94678982f66d85bb47f4437354d1b..efcb852a33d8dbbaf637d725a73d404758e04a13 100644 (file)
--- a/subprojects/extensions-app/data/ui/extension-row.ui
+++ b/subprojects/extensions-app/data/ui/extension-row.ui
@@ -46,23 +46,68 @@
                           <class name="status"/>
                         </style>
                         <child>
-                          <object class="GtkImage" id="errorIcon">
+                          <object class="GtkMenuButton" id="errorButton">
                             <property name="visible">false</property>
+                            <property name="valign">center</property>
+                            <property name="has-frame">false</property>
                             <property name="icon-name">dialog-error-symbolic</property>
                             <property name="tooltip-text" translatable="yes">The extension had an error</property>
-                            <style>
-                              <class name="error"/>
-                            </style>
+                            <accessibility>
+                              <property name="label" translatable="yes">Error Details</property>
+                            </accessibility>
+                            <property name="popover">
+                              <object class="GtkPopover" id="errorPopover">
+                                <property name="child">
+                                  <object class="AdwClamp">
+                                    <property name="maximum-size">300</property>
+                                    <property name="tightening-threshold">300</property>
+                                    <property name="child">
+                                      <object class="GtkLabel" id="errorLabel">
+                                        <!-- Hack to make the screen reader read the label -->
+                                        <property name="selectable"
+                                                  bind-source="errorPopover"
+                                                  bind-property="visible"
+                                                  bind-flags="invert-boolean|sync-create"/>
+                                        <property name="wrap">true</property>
+                                      </object>
+                                    </property>
+                                  </object>
+                                </property>
+                              </object>
+                            </property>
                           </object>
                         </child>
                         <child>
-                          <object class="GtkImage" id="updatesIcon">
+                          <object class="GtkMenuButton" id="updatesButton">
                             <property name="visible">false</property>
+                            <property name="valign">center</property>
+                            <property name="has-frame">false</property>
                             <property name="icon-name">software-update-available-symbolic</property>
                             <property name="tooltip-text" translatable="yes">The extension can be updated</property>
-                            <style>
-                              <class name="warning"/>
-                            </style>
+                            <accessibility>
+                              <property name="label" translatable="yes">Updates Details</property>
+                            </accessibility>
+                            <property name="popover">
+                              <object class="GtkPopover" id="updatesPopover">
+                                <property name="child">
+                                  <object class="AdwClamp">
+                                    <property name="maximum-size">200</property>
+                                    <property name="tightening-threshold">200</property>
+                                    <property name="child">
+                                      <object class="GtkLabel">
+                                        <property name="label" translatable="yes">A new version of this extension is ready and will be loaded on next login.</property>
+                                        <!-- Hack to make the screen reader read the label -->
+                                        <property name="selectable"
+                                                  bind-source="updatesPopover"
+                                                  bind-property="visible"
+                                                  bind-flags="invert-boolean|sync-create"/>
+                                        <property name="wrap">true</property>
+                                      </object>
+                                    </property>
+                                  </object>
+                                </property>
+                              </object>
+                            </property>
                           </object>
                         </child>
                       </object>
@@ -78,18 +123,6 @@
                     </style>
                   </object>
                 </child>
-                <child>
-                  <object class="GtkLabel" id="errorLabel">
-                    <property name="visible">false</property>
-                    <property name="selectable">true</property>
-                    <property name="wrap">True</property>
-                    <property name="xalign">0</property>
-                    <style>
-                      <class name="caption"/>
-                      <class name="error"/>
-                    </style>
-                  </object>
-                </child>
               </object>
             </child>
             <child>

diff --git a/subprojects/extensions-app/js/main.js b/subprojects/extensions-app/js/main.js
index 77cac91225ce3aa1a72db34e0b9b9b3a71927c87..d656e201a6e039f0d2155a360877e16f46519964 100644 (file)
--- a/subprojects/extensions-app/js/main.js
+++ b/subprojects/extensions-app/js/main.js
@@ -361,8 +361,8 @@ var ExtensionRow = GObject.registerClass({
         'descriptionLabel',
         'versionLabel',
         'errorLabel',
-        'errorIcon',
-        'updatesIcon',
+        'errorButton',
+        'updatesButton',
         'switch',
         'actionsBox',
     ],
@@ -503,13 +503,9 @@ var ExtensionRow = GObject.registerClass({
         if (!action.enabled)
             this._switch.active = state;
 
-        this._updatesIcon.visible = this.hasUpdate;
-        this._errorIcon.visible = this.hasError;
-
-        this._descriptionLabel.visible = !this.hasError;
-
+        this._updatesButton.visible = this.hasUpdate;
+        this._errorButton.visible = this.hasError;
         this._errorLabel.label = this.error;
-        this._errorLabel.visible = this.error !== '';
 
         this._versionLabel.label = this.version.toString();
         this._versionLabel.visible = this.version !== '';